import React from 'react';
import './styles.less';
import closeIcon from '../../img/close.svg';
import { useContext } from '../../context';
import showDicesSelector from '../dices-selector';

export default function YellowBoard(props: any) {
  const { store } = useContext();
  const yellowDice = store.dices.rockPool.find(d => d.type === 'yellow');
  const whiteDice = store.dices.rockPool.find(d => d.type === 'white');

  return (
    <div className="yellowboard">
      {props.data.map((i: any[], row: number) =>
        i.map((j, column: number) => {
          const yellowUseable = yellowDice && yellowDice.value > j[0] - 1;
          const whiteUseable = whiteDice && whiteDice.value > j[0] - 1;
          const useable = !j[1] && (yellowUseable || whiteUseable);
          return (
            <div
              className={`yellowboard-item ${useable ? 'dice-useable' : ''}`}
              key={row + column}
              onClick={async () => {
                if (useable) {
                  var dice: any = yellowDice || whiteDice;
                  if (yellowUseable && whiteUseable) {
                    dice = await showDicesSelector([yellowDice, whiteDice]);
                  }
                  dice &&
                    store.reverseChange(['yellowData', row, column, 1], dice);
                }
              }}
              style={{
                gridColumn: `${(column + 1) * 4 - 1} / ${(column + 2) * 4 - 1}`,
                gridRow: `${(row + 1) * 4 - 1} / ${(row + 2) * 4 - 1}`,
              }}
            >
              {j[0]}
              {j[1] ? (
                <div className="a-checked">
                  <img src={closeIcon} />
                </div>
              ) : null}
            </div>
          );
        }),
      )}
      {[10, 14, 16, 20].map((i, column) => (
        <div
          className="yellowboard-point-item"
          key={i}
          style={{
            gridColumn: `${(column + 1) * 4 - 1} / ${(column + 2) * 4 - 1}`,
            gridRow: `19 / 23`,
          }}
        >
          {i}
        </div>
      ))}
      <div
        className="yellowboard-blue"
        style={{ gridColumn: `19 / 23`, gridRow: `3 / 7` }}
      >
        x
      </div>
      <div
        className="yellowboard-orange"
        style={{ gridColumn: `19 / 23`, gridRow: `7 / 11` }}
      >
        4
      </div>
      <div
        className="yellowboard-green"
        style={{ gridColumn: `19 / 23`, gridRow: `11 / 15` }}
      >
        x
      </div>
      <div
        className="fox"
        style={{ gridColumn: `19 / 23`, gridRow: `15 / 19` }}
      >
        🦊
      </div>
      <div
        className="add1"
        style={{ gridColumn: `19 / 23`, gridRow: `19 / 23` }}
      >
        +1
      </div>
    </div>
  );
}
